import React from 'react';
import {Image, StatusBar, StyleSheet, TextInput, View,} from 'react-native';
import * as Color from "../../constant/Color";
import RippleButton from "../btn/RippleButton";
import TouchButton from "../btn/HighlightButton";
import HttpHelper from "../../helper/HttpHelper";
import {UUID} from "../../util/UUID";

const bg            = require('../../../../img/lib/ic_login.jpg');
const pic_logo      = require('../../../../img/lib/ic_gaqu_logo_login.png');
const input_bg      = require('../../../../img/lib/ic_gaqu_login_kuang.png');
const label_user    = require('../../../../img/lib/ic_gaqu_login_username.png');
const label_pwd     = require('../../../../img/lib/ic_gaqu_login_pwd.png');
const input_divide  = require('../../../../img/lib/ic_gaqu_login_v_line.png');

/** 登录 */
export default class Login extends React.Component {

    static navigationOptions = ({ navigation }) => ({
        header: null,
    });

    constructor(props){
        super(props);
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar
                    // hidden={true}
                    backgroundColor="transparent"
                    translucent={true} />

                <Image style={styles.bg} source={bg} resizeMode={Image.resizeMode.stretch} />

                <View style={styles.line_layout}>
                    <Image style={styles.pic_logo} source={pic_logo} resizeMode={Image.resizeMode.contain}/>
                </View>

                <View style={styles.line_layout}>
                    <View style={styles.input_layout}>
                        <Image style={styles.input_bg} resizeMode={Image.resizeMode.stretch} source={input_bg} />
                        <Image style={styles.label_key} source={label_user}  resizeMode={Image.resizeMode.contain}/>
                        <Image style={styles.input_divide} source={input_divide}  resizeMode={Image.resizeMode.contain}/>

                        <TextInput style={styles.label_value} underlineColorAndroid={'transparent'}/>
                    </View>
                </View>

                <View style={styles.line_layout}>
                    <View style={styles.input_layout}>
                        <Image style={styles.input_bg} source={input_bg} resizeMode={Image.resizeMode.stretch} />
                        <Image style={styles.label_key} source={label_pwd} resizeMode={Image.resizeMode.contain}/>
                        <Image style={styles.input_divide} source={input_divide} resizeMode={Image.resizeMode.contain}/>

                        <TextInput secureTextEntry={true} style={styles.label_value} underlineColorAndroid={'transparent'}/>
                    </View>
                </View>

                <View style={styles.line_layout_1}>
                    <RippleButton styleText={styles.text_other_func} title={'忘记密码'} onPress={()=>{}}/>
                    <RippleButton styleText={styles.text_other_func} title={'注册'} onPress={()=>{}}/>
                </View>

                <View style={styles.line_layout}>
                    <TouchButton styleTouch={styles.buttonTouch} underlayColor={Color.colorPrimaryDark} styleText={styles.buttonText} title={'登录'} onPress={()=>{ this._onSubmit() }}/>
                </View>
                <HttpHelper ref={'http'}/>
            </View>
        );
    }

    _onSubmit():void{
        this._Load();
    }

    _Load():void{
        if(!this.refs.http) return;
        this.refs.http.setURL("https://www.baidu.com/")
            .setMethod(HttpHelper.GET)
            .setNotiInfo("正在加载百度")
            .setHeadParams(new Map())
            .setBodyParams(new Map())
            .setRequestId(UUID.getOne())
            .setListener((responseCode:number, res:string) => {
                console.log("responseCode:" + responseCode + ", res:" + res);
                this._gotoMain();
            })
            .setTimeout(10 * 1000)
            .start(true);
    }

    _gotoMain(){
        // const {navigate, goBack, state} = this.props.navigation;
        // goBack();
        // navigate('drawer');
        this.props.navigation.replace('drawer');
        // this.props.navigation.pop(1); // 弹1个
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection:'column',
        flex:1,
        // alignItems: 'center',
        justifyContent: 'center',
    },
    bg: {
        position: 'absolute',   //相对父元素进行绝对定位
    },
    line_layout: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop:5,
        paddingBottom:5,
    },
    pic_logo: {
        width: 250,
        height: 150,
        marginBottom:40,
    },

    input_layout: {
        width: 280,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        paddingLeft:5,
        paddingRight:5,
        // backgroundColor: Color.colorPrimary,
    },
    input_bg: {
        position: 'absolute',
        width: 280,
        height: 50,
    },
    label_key: {
        width: 35,
        height: 35,
    },
    input_divide: {
        width: 10,
        height: 35,
    },
    label_value: {
        height: 50,
        flex:1,
        color:Color.white,
    },
    line_layout_1: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
        paddingLeft:50,
        paddingRight:50,
    },
    text_other_func: {
        fontSize: 16,
        color:Color.white,
        margin:2,
    },
    buttonTouch: {
        width: 280,
        height: 50,
        backgroundColor:Color.colorPrimary,
    },
    buttonText: {
        fontSize: 22,
        color:Color.white,
    },
});


